﻿﻿<link rel="stylesheet" type="text/css" href="~/Content/content_screen/designSymbol.css" />
@{
    bool isDrawingLine = false;}
@section scripts
{

    <script type="text/javascript">
        //------------------create canvas-------------------------
        function createNewCanvas() {
        //-----------------canvas size, default size is square shape----
            var w = document.getElementById("width").value;
            var h = document.getElementById("heigh").value;
            var size = 450 / w;
            var weight = 5; // Do rong cua net ve

            var c_canvas = document.getElementById("c");
            var canvas_0 = document.getElementById("c0");

//            var container = new CanvasLayers.Container(canvas, false);
//            var layer1 = new CanvasLayers.Layer(10, 60, 60, 60);
//            container.getChildren().add(layer1);

            var context = c_canvas.getContext("2d");
            var context_0 = canvas_0.getContext("2d");

            var top = $("#c").offset().top;
            var left = $("#c").offset().left;
            $("#choosen").val("Red");

            //-------add event listener---------------------
           // c_canvas.addEventListener('click', drawPath);
            c_canvas.addEventListener("mousedown", function (e) {
                findxy('down', e)
            }, false);
            c_canvas.addEventListener("mousemove", function (e) {
                findxy('move', e)
            }, false);
            c_canvas.addEventListener("mouseup", function (e) {
                findxy('up', e)
            }, false);
            c_canvas.addEventListener("mouseout", function (e) {
                findxy('out', e)
            }, false);
            //-----variables innitial----------------------
            var index = 0;
            var width = w;
            var height = h;

            var prevX = 0, currX = 0, prevY = 0, currY = 0;
            c_canvas.width = size * width + 1;
            c_canvas.height = size * height + 1;
            canvas0_size = 240;
            canvas_0.width = width;
            canvas_0.height = height;

            var dot_flag = false;
            var flag = false;
            
            //-----------draw grid----------------------------
            drawGrid()
            //------------------------------------------------
            var imageData = context_0.createImageData(width, height);
           
            for (var i = 0; i < width; i++) {
                for (var j = 0; j < height; j++) {
                    index = 4 * (i + j * width);
                    imageData.data[index] = 227;
                    imageData.data[index + 1] = 227;
                    imageData.data[index + 2] = 227;
                    imageData.data[index + 3] = 255;
                }
            }
            context_0.putImageData(imageData, 0, 0);
            
            function findxy(res, e) {
                if (res == 'down') {
                    flag = true;
                    dot_flag = true;
                    if (dot_flag) {
                        drawDot(e);
                    }
                    else {
                        drawDot(e);
                        dot_flag = false;
                    }
                }
                if (res == 'up' || res == "out") {
                    flag = false;
                }
                if (res == 'move') {
                   
                    if (flag) {
         
                        drawDot(e);
                       
                    }
                }
            }
            
            function drawDot(e) {
                var i = parseInt((e.layerX - left) / size);
                var j = parseInt((e.layerY - top) / size);
                var x = i * size;
                var y = j * size;
                var txt_color = $("#choosen").val();
                context.fillStyle = txt_color;
                context.fillRect(x, y, weight * size, weight * size);
                var r = 255; var g = 255; var b = 255;
                if (txt_color == "Red") {
                    r = 255; g = 0; b = 0;
                } else if (txt_color == "Green") {
                    r = 0; g = 255; b = 0;
                } else if (txt_color == "Blue") {
                    r = 0; g = 0; b = 255;
                } else if (txt_color == "Yellow") {
                    r = 255; g = 255; b = 0;
                }
                for (var k = i; k <= i+weight; k++) {
                    for (var t = j; t <= j+weight; t++) {
                        var index = 4 * (k + t * width);
                        imageData.data[index] = r;
                        imageData.data[index + 1] = g;
                        imageData.data[index + 2] = b;
                        imageData.data[index + 3] = 255;
                    }
                }
                context_0.putImageData(imageData, 0, 0);
            }

            function drawPath(e) {
                var i = parseInt((e.layerX - left) / size);
                var j = parseInt((e.layerY - top) / size);
                var x = i * size;
                var y = j * size;
             
                context.fillStyle = $("#choosen").val(); // txt_color;
                context.fillRect(x, y, size, size);
                var r = 255; var g = 255; var b = 255;
                if (txt_color == "Red") {
                    r = 255; g = 0; b = 0;
                } else if (txt_color == "Green") {
                    r = 0; g = 255; b = 0;
                } else if (txt_color == "Blue") {
                    r = 0; g = 0; b = 255;
                } else if (txt_color == "Yellow") {
                    r = 255; g = 255; b = 0;
                }
                for (var k = i; k <= i + weight; k++) {
                    for (var t = j; t <= j + weight; t++) {
                        var index = 4 * (k + t * width);
                        imageData.data[index] = r;
                        imageData.data[index + 1] = g;
                        imageData.data[index + 2] = b;
                        imageData.data[index + 3] = 255;
                    }
                }
                context_0.putImageData(imageData, 0, 0);
            }
           
            function drawGrid() {

                for (var x = 0.5; x < size * width + 1; x += size) {
                    context.moveTo(x, 0);
                    context.lineTo(x, size * height + 1);
                }

                for (var y = 0.5; y < size * height + 1; y += size) {
                    context.moveTo(0, y);
                    context.lineTo(size * width + 1, y);
                }

                context.strokeStyle = "#909090";
                context.stroke();

            };

         //   $("#SelectColor").SelectOptionChangeValue("#SelectColor", false, "background-color");

            window.onload = function () {
                top = $("#c").offset().top;
                left = $("#c").offset().left;
            };
        } //end of function create new canvas
    </script>
    <!--           choose color and shape           -->
    <script type="text/javascript">
        // Select option Change value
        jQuery.fn.SelectOptionChangeValue =
    function (targetId, isValue, attr, param) {
        if (param == null)
            param = "";
        return this.each(function () {
            $(this).change(function () {
                var value = (isValue == true) ? $(this).find(":selected").val() : $(this).find(":selected").text();
                $(targetId).css(attr, value);
            });
        });
    };

        function saveImg() {
            var c_canvas = document.getElementById("c0");
            var dataURL = c_canvas.toDataURL("image/bmp"); alert(dataURL);
            //file_put_contents('D:/img.bmp', base64_decode(dataURL));
        };
    </script>
    <script type="text/javascript">
        function chooseColor(mcolor) {
            // - choose color -
            var color = document.getElementById("choosen");
            color.value = mcolor;
        }
        function chooseShape(sh) {
           // alert("choose line " + sh);
            var shape = document.getElementById("mshape");
            if (sh == 'line') {
                shape.value = 'line';
                @{isDrawingLine = true;}
            }
            else if (sh == 'rect') {
                shape.value = 'rect';
                @{isDrawingLine = true;}
            }
            else if (sh == 'dot') {
                @{isDrawingLine = false;}
            }
           

        }
    </script>
}
<h1>
    Symbol Design</h1>
             
<div id="container">
    <div id="mcanvas">
        <canvas id="c" style="cursor: pointer;"></canvas>
    </div>
    <div id="toolbox">
        <div id="create">
            <p class="header">
                New image:
            </p>
            <form id="create_box" action="javascript:createNewCanvas()">
            Width :
            <input type="text" id="width" name="width" />
            px Height:
            <input type="text" id="heigh" name="heigh" />
            px
            <input class="btn btn-primary" type="submit" value="Create" />
            </form>
        </div>
        <div id="choose-color">
            <p class="header">
                Choose color:
            </p>
          
            @foreach (var color in (List<SelectListItem>)ViewBag.Colors)
            {
            
                <button id="@color.Text" name="@color.Text" style="background:@color.Text;" onclick="chooseColor('@color.Text')">
                </button>
         
            }
            <input type="hidden" name="selectedColor" id="choosen" value="" />
        </div>
        <div id="shape">
            <p class="header">
                Shape:
            </p>
            <button id="line" name="line" onclick="chooseShape('line')">
                Line</button>
            <button id="rect" name="rect" onclick="chooseShape('rect')">
                Rectangle</button>
             <button id="dot" name="dot" onclick="chooseShape('dot')">
                Dot</button>
            <input type="hidden" name="mshape" id="mshape" value="" />
        </div>
        <div id="view">
            <p class="header">
                Image:
            </p>
            <canvas id="c0"></canvas>
        </div>
        <div id="tool">
            <button class="btn btn-primary">
                Eraser</button>
            <button class="btn btn-primary">
                Clear All</button>
            <button class="btn btn-primary" onclick="saveImg()">
                Save</button>
            <button class="btn btn-primary">
                Browse...</button>
        </div>
    </div>
</div>
